<template>
	<view class="pwBody">
		
		
		<view class="userDetails">
			
			<view class="Items">
				<text class="titles">旧密码</text>
				<input class="inputClass" @blur="inputChange" placeholder-class="inputs" placeholder="旧密码" type="text" v-model="userInfo.jPassWord" />
			</view>
			
			<view class="Items">
				<text class="titles">新密码</text>
				<input class="inputClass" placeholder-class="inputs" placeholder="新密码" type="text" v-model="userInfo.xPassWord" />
			</view>
			
			<view class="btnXg" @tap="xgTaps">确认修改</view>
		</view> 
		
	</view>
</template>

<script>
	import {setSavePwd} from '@/common/api/table.js';
	export default {
		data(){
			return{
				userInfo:{
					jPassWord:'',
					xPassWord:''
				},
				userPassWord:''
			}
		},
		onShow() {
			let back = uni.getStorageSync('userAccount');
			this.userPassWord = back.passWord;
		},
		methods:{
			inputChange(){
				if(this.userPassWord !==this.userInfo.jPassWord){
					uni.showToast({
						title:'旧密码输入不正确',
						icon:'none'
					})
					return;
				}
			},
			xgTaps(){
				if(this.userPassWord !==this.userInfo.jPassWord){
					uni.showToast({
						title:'旧密码输入不正确',
						icon:'none'
					})
					return;
				}
				if(!this.userInfo.xPassWord){
					uni.showToast({
						title:'请输入新密码',
						icon:'none'
					})
					return;
				}
				
				let data= {
					oldPwd:this.userInfo.jPassWord,
					pwd:this.userInfo.xPassWord,
				};
				setSavePwd(data)
				.then(res=>{
					if(res.code==200){
						uni.showToast({
							title:'修改成功,请重新登录',
							icon:'none'
						});
						setTimeout(()=>{
							uni.removeStorageSync('token');
							uni.removeStorageSync('userInfo');
							uni.reLaunch({
								url:'../user/user-dl'
							})
						},1500)
					}else{
						uni.showToast({
							title:res.message,
							icon:'none'
						});
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.pwBody{
		width: 750rpx;
		height: 100vh;
		background-color: white;
	}
	
	.userDetails {
		margin: 0 auto;
		margin-top: 50rpx;
		padding: 30rpx 0;
		width: 690rpx;
		background-color: white;
		border-radius: 15rpx;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
	
		.Items {
			width: 690rpx;
			height: 85rpx;
			display: flex;
			align-items: center;
			flex-direction: row;
			.titles {
				font-size: 30rpx;
				width: 140rpx;
				text-align: start;
				margin-left: 35rpx;
			}
	
			.inputClass {
				width: 500rpx;
				height: 85rpx;
			}
	
			.inputs {
				font-size: 30rpx;
				color: #C8C7CC;
			}
		}
	}
	
	.btnXg {
		width: 300rpx;
		height: 70rpx;
		background-color: #007AFF;
		text-align: center;
		line-height: 70rpx;
		border-radius: 25rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		color: white;
	}
</style>
